<% var obj = {pageTitle:"学生列表"} %>
{{include "../header.html" obj}}
<div class=" container">
    {{include "../pageHeader.html" obj}}
    <div class=" btn-group pull-right" style="margin-bottom:5px;">
        <button type="button" class=" btn btn-danger" id="delAll">
            <span class=" glyphicon glyphicon-trash"></span>
            批量删除
        </button>
    </div>
    <form action="/student/queryList" method="GET" class=" form-inline" style="margin:5px 0px;">
        <div class=" form-group">
            <label for="" class=" control-label">学号</label>
            <span><input type="text" class=" form-control" name="s_id"></span>
        </div>
        <div class=" form-group">
            <label for="" class=" control-label">姓名</label>
            <span><input type="text" class=" form-control" name="s_name"></span>
        </div>
        <div class=" form-group">
            <label for="" class=" control-label">性别</label>
            <select name="s_sex" id="" class=" form-control">
                <option value="">--请选择--</option>
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div class=" form-group">
            <button type="submit" class=" btn btn-primary">查询</button>
        </div>
    </form>
    <div class=" table-responsive">
        <table class=" table table-hover table-striped table-bordered">
            <tr>
                <td>
                    <label for="#ckAll">
                        <input type="checkbox" id="ckAll" class="ckAll">全选
                    </label>
                </td>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>电话</td>
                <td>班级</td>
                <td>宿舍</td>
                <td>照片</td>
                <td>操作</td>
            </tr>
            {{each result item index}}
            <tr>
                <td>
                    <input type="checkbox" name="ck" value="{{item.s_id}}">
                </td>
                <td>{{item.s_id}}</td>
                <td>{{item.s_name}}</td>
                <td>{{item.s_sex}}</td>
                <td>{{item.s_age}}</td>
                <td>{{item.s_tel}}</td>
                <td>{{item.c_id}}</td>
                <td>{{item.d_id}}</td>
                <td>
                    <label for="" id="showimg" class=" label btn-primary" data-imgsrc="{{item.s_photo}}" data-toggle="modal"
                        data-target="#modal2">查看照片</label>
                </td>
                <td>
                    <label for="" id="edit" class=" label btn-warning" data-toggle="modal" data-target="#modal1">编辑</label>
                    <label for="" id="delete" data-s_id="{{item.s_id}}" class=" label btn-danger">删除</label>
                </td>
            </tr>
            {{/each}}
        </table>
    </div>
</div>
<div class=" modal fade" id="modal1">
    <div class=" modal-dialog">
        <div class=" modal-content">
            <div class=" modal-header">
                <span class=" close" data-dismiss="modal">&times;</span>
                <h2 class=" text-center text-primary">编辑</h2>
            </div>
            <form method="POST" action="/student/upStudent" class=" form-horizontal" enctype="multipart/form-data">
                <div class=" modal-body">
                    {{each student_info item index}}
                    <% var obj = {item} %>
                    {{if item[1]=="性别"}}
                    {{include "../bs_views/form_group_select.html" obj}}
                    {{else if item[1]=="照片"}}
                    {{include "../bs_views/form_group_upimage.html" obj}}
                    {{else if item[1]=="宿舍"}}
                    <div class=" form-group">
                        <label for="" class=" col-sm-2 control-label">{{item[1]}}</label>
                        <div class=" col-sm-7">
                            <select name="{{item[0]}}" class=" form-control">
                                <option value="">--请选择宿舍--</option>
                                {{each dorm_info item index}}
                                <option value="{{item.d_id}}">{{item.d_id}}--{{item.d_type}}</option>
                                {{/each}}
                            </select>
                        </div>
                    </div>
                    {{else}}
                    {{include "../bs_views/form_group_input.html" obj}}
                    {{/if}}
                    {{/each}}
                </div>
                <div class=" modal-footer">
                    <div class=" form-group">
                        <div class=" col-sm-7 col-sm-offset-3">
                            <button type="submit" class=" btn btn-primary btn-submit-loading" disabled>保存</button>
                            <button type="reset" class=" btn btn-warning" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class=" modal fade" id="modal2">
    <div class=" modal-dialog">
        <div class=" modal-content">
            <div class=" modal-header">
                <span class=" close" data-dismiss="modal">&times;</span>
                <h2 class=" text-center text-primary">照片</h2>
            </div>
            <div class=" modal-body">
                <img id="modalimg" alt="" class=" img-responsive img-thumbnail" style="width:100%;height:100%;">
            </div>
            <div class=" modal-footer">
                <button type="reset" class=" btn btn-primary btn-block" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $(".table").on("click", "label", function (event) {
            event = window.event || event;
            if (event.target.id == "showimg") {
                var text = $(this).data("imgsrc");
                $("#modalimg").attr("src", "../.." + text);
            }
            if (event.target.id == "edit") {
                $(".btn-submit-loading").prop("disabled", true)
                $("#modal1 .form-control").change(function () {
                    $(".btn-submit-loading").prop("disabled", false)
                })
                var arr = [];
                $(event.target.parentElement).prevAll().not(":first").not(":last").each(function (index, element) {
                    // element == this
                    arr.unshift($(this).text());
                });
                $("#modal1 .form-control").not(":last").each(function (index, element) {
                    // element == this
                    $(this).val(arr[index]);
                });
                var text = $(this).parent().prev().children().data("imgsrc");
                $("#modal1 #btnChooseFile").attr("src", text);
            }
            if (event.target.id == "delete") {
                var s_id = $(this).data("s_id");
                if (confirm("确认操作！")) {
                    $.get("/student/delStudent?s_id=" + s_id,
                        function (data, textStatus, jqXHR) {
                            if (data.status == "success") {
                                alert(data.msg);
                                location.reload();
                            }
                            else {
                                alert(data.msg);
                            }
                        }
                    );
                }
            }
        });
        $(".form-control").inputTips();
        $("#modal1 input:first").prop("readonly", true);
        $("#btnChooseFile").click(function () {
            $("#s_photo").click();
        });
        $("#s_photo").change(function () {
            var reg = /^(image)\/(jpg|jpeg|bmp|gif|png|svg|ttf)$/;
            var file = this.files[0];
            if (reg.test(file.type)) {
                var fileReader = new FileReader();
                fileReader.onload = function (event) {
                    var base64 = event.target.result;
                    $("#btnChooseFile").attr("src", base64);
                }
                fileReader.readAsDataURL(file);
            }
            else {
                alert("请选择图片");
                $(this).val("");
            }
        })
        $("#delAll").click(function (e) {
            if ($("[name='ck']:checked").length > 0) {
                if (confirm("你确定要删除所有选中项吗！")) {
                    let s_idArr = [];
                    $("[name='ck']:checked").each(function (index, element) {
                        // element == this
                        s_idArr.push($(this).val());
                    });
                    console.log(s_idArr);
                    $.get("/student/delAllStudent?s_idArr=" + s_idArr.join("-"),
                        function (data, textStatus, jqXHR) {
                            if (data.status == "success") {
                                alert(data.msg);
                                location.reload();
                            }
                            else {
                                alert(data.msg);
                            }
                        }
                    );
                }
            }
        });
    })
</script>
{{include "../footer.html"}}